@import "constants.less";
@import "icons.less";
@import "table.less";
@import "forms.less";
@import "droe-select.less";
@import "widths.less";
@import "pdf.less";
@import "chart.less"; 
html{
    background-color: @backgroundColor;
    //scrollbar-3dlight-color:#666;
    //scrollbar-arrow-color:#333;
    //scrollbar-base-color:#444;
    //scrollbar-darkshadow-color:#555;
    //scrollbar-face-color:#666;
    //scrollbar-highlight-color:#666;
    //scrollbar-shadow-color:#666;
    //scrollbar-track-color:#333;
    overflow-y: auto;
    /*** Works on common browsers ***/
       ::selection {
           background-color: none;
           color: #fff;
       }
        
       /*** Mozilla based browsers ***/
       ::-moz-selection {
          background-color: none;
          color: #fff;
      }
       
      /***For Other Browsers ***/
      ::-o-selection {
          background-color: none;
          color: #fff;
      }
       
      ::-ms-selection {
          background-color: none;
          color: #fff;
      }
       
      /*** For Webkit ***/
      ::-webkit-selection {
          background-color: none;
          color: #fff;
      }
}
body{ 
    background-color: @backgroundColor;
    color: @textColor;



    .overlay{
        background-color: rgba(30,30,30,0.85);
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index: 100000;
    }

    .tooltip{
        position:absolute;
        padding:5px;
        background-color: #000;
        color: #999;
        text-align: center;
        font-size: 11px;
    }

    .ml{
        margin-left: 5px;
    }
    .mr{
        margin-right: 5px; 
    }
    .text-right{
        text-align: right !important;  
    }
    .text-center{
        text-align: center !important;  
    }
    .text-left{
        text-align: left !important;
    }
    .inline{
        display: -moz-inline-box;
        width:100%;
    }
    .main-wrapper{
        width:100%;
        padding: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

    }
    .state-wrapper{
        border: 1px solid #999;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px 0;
    }

    .status-message{
        width: 100%;
        text-align: center;
        color: red;
        padding: 0 0 5px 0;
    }

    .header{
        position:relative;
        h1{
            margin: 0;
            padding: 5px 10px 0 10px;
            font-size: 18px;
        }
        div{
            padding: 5px 10px;
            font-size: 12px;
        }
        .logo{
            position:absolute;
            right:0;
            top:0;
            margin:7px;
        }
    }
    .topmenu{
        width:100%;
        text-align: center;
        min-height:35px;
        ul{
            padding:0;
            width:685px;
            margin:0 auto;
            li{
                background-color: #555;
                font-size: 12px;
                margin:2px;
                padding:5px 5px;
                float:left;
                display:block;
                width:100px;
                text-align: center;
                &:hover{
                    background-color: #444;
                    cursor:pointer;
                }
                &.active{
                    background-color: #777;
                    font-weight: bold;
                    cursor: default;
                }
            }
        }
    }
    .tabs{
        margin-left: 10px;
        top: 5px;
        position: relative;
        .tab{
            position: relative;
            float:left;
            border: 1px solid #999;
            margin: 0 2px 0 0;
            font-size: 12px;
            padding:1px 4px;
            cursor: pointer;
            top:3px;
            background-color: #292929;
            &:hover{
                background-color: #555;
            }
            &.active{
                background-color: @backgroundColor;
                border-bottom: 1px solid @backgroundColor;
                z-index: 1000;
                top: 1px;
                padding:2px 4px;
                cursor: default;
                &:hover{
                    background-color: @backgroundColor;
                }
            }

        }
    }
    .scrollable{
//        scrollbar-3dlight-color:#666;
//        scrollbar-arrow-color:#333;
//        scrollbar-base-color:#444;
//        scrollbar-darkshadow-color:#555;
//        scrollbar-face-color:#666;
//        scrollbar-highlight-color:#666;
//        scrollbar-shadow-color:#666;
//        scrollbar-track-color:#333;
        overflow-y: auto;
    }
//    ::-webkit-scrollbar{
//        background: @backgroundColor;
//    }
//    ::-webkit-scrollbar-track{
//        background: #555;
//    }
//    ::-webkit-scrollbar-button{
//        height:0;
//        background: #555;
//    }
//    ::-webkit-scrollbar-track-piece{
//        background: #555;
//    }
//    ::-webkit-scrollbar-thumb{
//        background: #666;
//        border-radius: 2px;
//    }

    .rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);

        /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;

        /* Should be unset in IE9+ I think. */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .full-height{
        height: 100% !important;
    }

}

